<template>
  <el-dialog
    v-model="dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :title="title"
    width="940px"
    @close="closeDialog"
  >
    <el-form :inline="true" label-width="126px">
      <el-form-item label="总手数：">
        <span style="font-weight: 600; font-size: 18px">
          {{ formatPrice(stockInfo.totalHands, 0) }}
        </span>
      </el-form-item>
      <el-form-item label="成交额：">
        <span style="font-weight: 600; font-size: 18px">
          {{ formatMainMoney(stockInfo.transactionVolume) }}
        </span>
      </el-form-item>
      <el-form-item label="流通市值：">
        <span :class="getColor(stockInfo.marketValue, 'marketValue')">
          {{ formatMainMoney(stockInfo.marketValue) }}
        </span>
        <span class="gap">
          （{{ formatGapMoney(sectorInfo.market[0]) }} -
          {{ formatGapMoney(sectorInfo.market[1]) }}）
        </span>
      </el-form-item>
      <el-form-item label="主力净流入：">
        <span :class="getColor(stockInfo.mainMoneyNet, 'mainMoneyNet')">
          {{ formatMainMoney(stockInfo.mainMoneyNet) }}
        </span>
        <span class="gap">（大于1千万）</span>
      </el-form-item>
      <el-form-item label="换手率：">
        <span :class="getColor(stockInfo.turnoverRate, 'turnoverRate')">
          {{ stockInfo.turnoverRate + '%' }}
        </span>
        <span class="gap">（{{ sectorInfo.turnover.join('-') }}%）</span>
      </el-form-item>
      <el-form-item label="量比：">
        <span :class="getColor(stockInfo.volumeRatio, 'volumeRatio')">
          {{ stockInfo.volumeRatio }}
        </span>
        <span class="gap">（大于1）</span>
      </el-form-item>
      <el-form-item label="净利率：">
        <span :class="getColor(stockInfo.netMargin, 'netMargin')">
          {{ stockInfo.netMargin + '%' }}
        </span>
        <span class="gap">（{{ sectorInfo.netMargin.join('-') }}%）</span>
      </el-form-item>
      <el-form-item label="毛利率：">
        <span :class="getColor(stockInfo.grossMargin, 'grossMargin')">
          {{ stockInfo.grossMargin + '%' }}
        </span>
        <span class="gap" v-if="sectorInfo.grossMargin.length > 0">
          （{{ sectorInfo.grossMargin.join('-') }}%）
        </span>
      </el-form-item>
      <el-form-item label="市盈率：">
        <span :class="getColor(stockInfo.pe, 'pe')">
          {{ stockInfo.pe + '倍' }}
        </span>
        <span class="gap">（{{ sectorInfo.pe.join('-') }}倍）</span>
      </el-form-item>
      <el-form-item label="市净率：">
        <span :class="getColor(stockInfo.pb, 'pb')">
          {{ stockInfo.pb + '倍' }}
        </span>
        <span class="gap">（{{ sectorInfo.pb.join('-') }}倍）</span>
      </el-form-item>
      <el-form-item label="净资产收益率：">
        <span :class="getColor(stockInfo.roe, 'roe')">
          {{ stockInfo.roe + '%' }}
        </span>
        <span class="gap">（{{ sectorInfo.roe.join('-') }}%）</span>
      </el-form-item>
      <el-form-item label="资产负债率：">
        <span :class="getColor(stockInfo.ratio, 'ratio')">
          {{ stockInfo.ratio + '%' }}
        </span>
        <span class="gap">（{{ sectorInfo.ratio.join('-') }}%）</span>
      </el-form-item>
      <el-form-item label="近4年高抛低吸：" class="inline">
        <span :class="calculateDealUI(stockInfo)">
          {{ stockInfo.price }}
        </span>
        （{{ calculateDealTool(stockInfo) }}）
      </el-form-item>
      <el-form-item label="概念：" class="inline">
        <el-tag
          type="primary"
          :key="index"
          v-for="(item, index) in stockInfo.concept.split(',')"
        >
          {{ item }}
        </el-tag>
      </el-form-item>
      <el-form-item label="板块描述：" class="inline">
        <p style="margin: 0">
          {{ formatMonth(sectorInfo.month) }}
          {{ sectorInfo.month.length > 0 ? '（' : '' }}
          {{ sectorInfo.describe }}
          {{ sectorInfo.month.length > 0 ? '）' : '' }}
        </p>
      </el-form-item>
    </el-form>

    <div id="chartRef" style="width: 908px; height: 400px"></div>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import * as echarts from 'echarts';

import sectorMap from '../store/sectorMap';
import { stockStore } from '@/store/stock';
const store = stockStore();
import {
  formatPrice,
  formatBlock,
  formatMainMoney,
  calculateDealUI,
  calculateDealTool
} from '../method/index.js';
const dialogVisible = ref(false);

const emit = defineEmits(['close']);
const props = defineProps({
  info: {
    type: Object,
    required: true
  }
});

const title = computed(() => {
  return props.info.name + '(' + formatBlock(props.info.code) + ')';
});

const stockInfo = ref(null);
const sectorInfo = ref(null);
onMounted(async () => {
  let { lowList, highList, dateList, lowPrice, highPrice, mostPrice } =
    await store.getHistoryStockPrice(props.info.code);

  stockInfo.value = props.info;
  stockInfo.value.lowPrice = lowPrice;
  stockInfo.value.highPrice = highPrice;

  sectorInfo.value = sectorMap[props.info.sector];
  dialogVisible.value = true;

  const option = {
    color: ['#f10', '#1f0'],
    title: {
      text: '近4年走势图',
      textStyle: {
        color: '#3D3D3D',
        fontSize: 16,
        fontWeight: 'normal'
      }
    },
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    legend: {
      top: 0,
      right: 0
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: dateList
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '最高价',
        type: 'line',
        data: highList,
        markLine: {
          symbol: ['none', 'none'], 
          data: [
            {
              yAxis: mostPrice * 1.2
            }
          ],
          lineStyle: {
            color: '#f10',
            width: 3
          }
        }
      },
      {
        name: '最低价',
        type: 'line',
        data: lowList,
        markLine: {
          symbol: ['none', 'none'], 
          data: [
            {
              yAxis: mostPrice * 0.8
            }
          ],
          lineStyle: {
            color: '#1f0',
            width: 3
          }
        }
      }
    ]
  };

  setTimeout(() => {
    const myChart = echarts.init(document.getElementById('chartRef'));
    myChart.setOption(option);
  }, 1000);
});

const getColor = (value, type) => {
  switch (type) {
    case 'mainMoneyNet':
      if (value > 1e7) {
        return 'green';
      } else {
        return 'red';
      }
    case 'volumeRatio':
      if (stockInfo.value.changePercent) {
        if (value > 1) {
          return 'green';
        } else {
          return 'red';
        }
      } else {
        return 'red';
      }
    case 'turnoverRate':
      let turnoverRateGap = sectorInfo.value.turnover;
      if (value >= turnoverRateGap[0] && value <= turnoverRateGap[1]) {
        return 'green';
      } else {
        return 'red';
      }
    case 'pe':
      let peGap = sectorInfo.value.pe;
      if (value >= peGap[0] && value <= peGap[1]) {
        return 'green';
      } else {
        return 'red';
      }
    case 'pb':
      let pbGap = sectorInfo.value.pb;
      if (value >= pbGap[0] && value <= pbGap[1]) {
        return 'green';
      } else {
        return 'red';
      }
    case 'roe':
      let roeGap = sectorInfo.value.roe;
      if (value >= roeGap[0] && value <= roeGap[1]) {
        return 'green';
      } else {
        return 'red';
      }
    case 'ratio':
      let ratioGap = sectorInfo.value.ratio;
      if (value >= ratioGap[0] && value <= ratioGap[1]) {
        return 'green';
      } else {
        return 'red';
      }
    case 'marketValue':
      let marketGap = sectorInfo.value.market;
      if (value >= marketGap[0] && value <= marketGap[1]) {
        return 'green';
      } else {
        return 'red';
      }
    case 'netMargin':
      let netMarginGap = sectorInfo.value.netMargin;
      if (value >= netMarginGap[0] && value <= netMarginGap[1]) {
        return 'green';
      } else {
        return 'red';
      }
    case 'grossMargin':
      if (sectorInfo.value.grossMargin.length === 0 || value === '-') {
        return '';
      }
      let grossMarginGap = sectorInfo.value.grossMargin;
      if (value >= grossMarginGap[0] && value <= grossMarginGap[1]) {
        return 'green';
      } else {
        return 'red';
      }
  }
};

const formatGapMoney = (money) => {
  if (!money || money === '-') return 0;
  return money / 100000000 + '亿';
};

const formatMonth = (month) => {
  if (!month || month.length === 0) return '';
  let monthStr = '热门月份：';
  month.forEach((item, index) => {
    monthStr += item + '月' + (index === month.length - 1 ? '' : '、');
  });
  return monthStr;
};

const closeDialog = () => {
  emit('close');
};
</script>

<style lang="scss" scoped>
::v-deep(.el-form-item) {
  width: 50%;
  margin-right: 0;
}

::v-deep(.el-form-item__content) {
  text-align: left;
}

.inline {
  width: 100% !important;
  ::v-deep(.el-tag) {
    margin-right: 6px;
    margin-top: 2px;
    margin-bottom: 2px;
  }
}
.green {
  color: #67c23a;
  font-size: 18px;
  font-weight: bold;
}
.red {
  color: #f56c6c;
  font-size: 18px;
}
</style>
